<!-- 周期到账弹出窗 -->
<template>
	<div>
		<el-dialog title="月赠送券" v-model="state.isShowDialog"  center class="borderRadius10" width="980">
			<div class="cropper-warp">
                <el-form ref="ruleFormRef" :model="state.formData" label-width="120px">
                    <el-form-item label="赠送方式：">
						<section style="display: flex;flex-direction: column;">
							<el-radio-group v-model="state.formData.type" @change="typeChangeFun()">
								<el-radio :label=0>统一设置</el-radio>
								<el-radio :label=1>单一设置</el-radio>
							</el-radio-group>
							<explainBox v-if="state.formData.type == 0" msg="即按月赠送固定代金券" :isPicUrl=false color="var(--el-color-primary-light-2)" />
							<explainBox v-if="state.formData.type == 1" msg="即单独设置时间单独设置赠送券" :isPicUrl=false color="var(--el-color-primary-light-2)" />
						</section>
                    </el-form-item>

                    <el-form-item label="赠送日期："  v-if="state.formData.type == 0" prop="itemDate"  :rules="[
						{ required: true, message: '请输入', trigger:'blur'},
						{ pattern: /^[1-9]\d*$/, message: '赠送日期：', trigger: 'blur' }
					]">
						<el-input-number class="width450" v-model="state.formData.itemDate" :precision="0" :step="1" :min="1" :max="31" placeholder="到账时间" />
                    </el-form-item>
                    <el-form-item label="赠送券：" v-if="state.formData.type == 0">
                        <el-button text type="primary" @click="openCouponSelectFun('unification',0)">
							添加券
						</el-button>
                    </el-form-item>

                    <el-form-item label="单一设置：" v-if="state.formData.type == 1"> 
                        <el-table border :data="state.formData.tableData" style="width: 100%;">
							<el-table-column prop="" label="到账时间" >
                                <template #default="scope">
									<span>购买后第{{ scope.$index + 1 }}个月</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="itemDate" label="到账日期" >
                                <template #default="scope">
									<el-input-number class="width140" v-model="scope.row.itemDate" :precision="0" :step="1" :min="1" :max="31" placeholder="日期" />
                                </template>
                            </el-table-column>
                            <el-table-column prop="itemNum" label="赠送券明细" show-overflow-tooltip>
                                <template #default="scope">
									<el-button text type="primary" @click="openCouponSelectFun('single',scope.$index)">
                                        添加券
                                    </el-button>
                                </template>
                            </el-table-column>
                            <el-table-column prop="title" label="操作"  width="80">
                                <template #default="scope">
                                    <el-button text type="primary" @click="delItem(scope.$index)">
                                        移除
                                    </el-button>
                                </template>
                            </el-table-column>
						</el-table>
					</el-form-item>
					<el-form-item v-if="state.formData.type == 1"> 
						<el-button class="mt20" style="width: 100%" @click="addItemList">
							<el-icon> <ele-Add /> </el-icon> 新增
						</el-button>
					</el-form-item>
                </el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel"  >取 消</el-button>
					<el-button type="primary" @click="onSubmit"  >确 认</el-button>
				</span>
			</template>
		</el-dialog>
		<relevanceCouponDialog ref="relevanceCouponDialogRef" @selectCouponFun="selectCouponFun" />
	</div>
</template>

<script setup lang="ts" name="cropper">
import { reactive, ref, defineAsyncComponent } from 'vue';
const relevanceCouponDialog = defineAsyncComponent(() => import('/@/components/createGoods/relevanceCouponDialog.vue'))
const relevanceCouponDialogRef = ref()
const emit = defineEmits(['selectCouponFun'])
// 定义变量内容
const state = reactive({
    loading: false,
	isShowDialog: false,
	useIndex: 0,
    title:'',
    goodsTableData:[]as Array<any>,
    formData:{
        type:1,
        itemDate:null,
        itemNum:null,
        tableData:[]as Array<any>,
    }
});

// 打开弹窗
const openDialog = ( data: any) => {
	state.isShowDialog = true;
	console.log(JSON.stringify(data))
	if(data.length > 0){
		// state.formData.type = data[0].itemId;
		// state.formData.itemDate = data[0].itemDate;
		// state.formData.itemNum = data[0].itemNum;
		// state.formData.tableData = data
	}
};

const typeChangeFun = () =>{

}

// 生日券选择
const openCouponSelectFun = (type:string,index:number) => {
	state.operateIndex = index;
	if( type == 'unification'){  //统一
		relevanceCouponDialogRef.value.openDialog(type,[])
	}else if(type == 'single'){  //单一
		relevanceCouponDialogRef.value.openDialog(type,[])
	}
}


// 生日券选择回调
const selectCouponFun = (type:String,list:any)  => {
	if( type == 'unification'){
		
	}else if(type == 'single'){
		
	}
}

const addItemList = () => {
    state.formData.tableData.push({
		date: '',
        price:1,
	})
}


const delItem = (index: number) => {
	console.log(index)
}

// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};

const onSubmit = () =>{
	// 统一设置
	let datax = [] as Array <any>;
	if(state.formData.type == 0){
		datax.push({
			itemId:0,
			itemDate:state.formData.itemDate,
			itemNum:state.formData.itemNum
		})
	}else if(state.formData.type == 1){
		state.formData.tableData.map((item:any)=>{
			datax.push({
				itemId:1,
				itemDate:item.itemDate,
				itemNum:item.itemNum
			})
		})
	}
	emit('selectCouponFun', datax);
	closeDialog();
}

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss">
.cropper-warp {
	.cropper-warp-left {
		position: relative;
		display: inline-block;
		height: 350px;
		flex: 1;
		border: 1px solid var(--el-border-color);
		background: var(--el-color-white);
		overflow: hidden;
		background-repeat: no-repeat;
		cursor: move;
		border-radius: var(--el-border-radius-base);
		.cropper-warp-left-img {
			width: 100%;
			height: 100%;
		}
	}
	.cropper-warp-right {
		width: 150px;
		height: 350px;
		.cropper-warp-right-title {
			text-align: center;
			height: 20px;
			line-height: 20px;
		}
		.cropper-warp-right-item {
			margin: 15px 0;
			.cropper-warp-right-value {
				display: flex;
				.cropper-warp-right-value-img {
					width: 100px;
					height: 100px;
					border-radius: var(--el-border-radius-circle);
					margin: auto;
				}
				.cropper-size {
					width: 50px;
					height: 50px;
				}
			}
			.cropper-warp-right-label {
				text-align: center;
				font-size: 12px;
				color: var(--el-text-color-primary);
				height: 30px;
				line-height: 30px;
			}
		}
	}
}
</style>
